<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<link rel="stylesheet" href="css/sidebar.css">
		<style>
			div{
				width: 300px;
				height: 300px;
				
			}
			div.taiyi{
				background: url(img/1.png);
				background-size: 100% 100%;
				position: absolute;
				/* 堆叠属性：必须存在相对或者绝对定位情况下，z-index:堆叠属性：属性值：9999内
				 */
				z-index: 2;
			}
			div.shengongbao{
				background: url(img/4.png);
				background-size: 100% 100%;
				position: absolute;
				
				z-index: 2;

			}
		</style>
	</head>
	<body>
		<!-- 左栏效果：左弹窗功能 
		    语义化元素----div功能一致
			div起名---不利于SEO优化
			涵盖名称---有利于SEO优化
			建议：搭建页面结构,固定功能：左栏、主区域、导航栏
			      使用语义化元素
		    article元素：独立的内容区域块，存：新闻、博客区域、左栏弹出功能栏
		-->
		<article>
			<ul class="sidebar">
				<!-- 左栏弹出框：找到无序列表第一个li上，div起名outer -->
				<div class="outer"></div>
				<li>手机 平板 电话卡</li>
				<li>电视 盒子             ></li>
				<li>路由器 智能硬件</li>
				<li>移动电源 插线板</li>
				<li>耳机 音响</li>
				<li>电池 存储卡</li>
				<li>保护套 后</li>
				<li>壁膜</li>
				<li>其他</li>
				<li>其他周边</li>
			</ul>
		</article>
		
		
		
		
		
		
		
		
		
		
		<!-- 相对定位与绝对定位，页面弹出功能
		     相对定位：Position：relative,使用率高，相对于父级元素定位，元素存在于文档流中
			 绝对定位：position：absolute，使用率较高，存在父级，按照父级定位，没有父级，按照
			 左上角位置进行定位 ，元素脱离文档流（会导致堆叠）
			 堆叠问题：z-index属性：属性值，属性值越大，越靠前
		     根据相对定位与绝对定位特点，实现左栏功能
			 左栏区使用相对定位：左栏区域基本不会移动【理解：钩点位】
			 左栏弹出使用绝对定位：左栏弹出区域频繁切换【理解：钩子】
		 -->
		 <di v class="taiyi"></div>
		 <di v class="shengongbao"></div>
	</body>
</html>